var cpage = 0;
function time_sex_count(p) {
    showTableAndEcharts();
    stopColor();
    isFlag = true;
    cpage = p;
    time_sex_count_table();
    time_sex_count_echart();
}


function time_sex_count_table() {
    $.ajax({
        method: "POST",
        url: "timeSexCountByPage",
        data: {
            page: cpage
        },
        success: function (data) {
            $("#tip").html("<h3>各时间段不同性别统计表格</h3>");
            $("#echart-tip").html("<h3>各时间段不同性别统计图表</h3>");

            //重置表头
            $("#head-tr").empty();
            //重新添加表头
            $("#head-tr").append("<th>ID</th><th>时间段</th><th>性别</th><th>总操作量</th>");

            //重置表的数据
            $("tbody").empty();
            var jsonArr = JSON.parse(data);

            $.each(jsonArr, function (index, timeCount) {
                if (index % 2 == 0) {
                    $("tbody").append("<tr class='active'><td>"+timeCount.id+"</td><td>"+timeCount.hour+"</td><td>"+timeCount.sex+
                        "</td><td>"+timeCount.count+"</td></tr>")
                } else {
                    $("tbody").append("<tr class='info'><td>"+timeCount.id+"</td><td>"+timeCount.hour+"</td><td>"+timeCount.sex+
                        "</td><td>"+timeCount.count+"</td></tr>")
                }
            });

            $("tbody tr").on("mouseenter", this, function() {
                color = $(this).attr("class");
                $(this).removeClass(color);
                $(this).addClass("success");
            });
            $("tbody tr").on("mouseleave", this, function() {
                $(this).removeClass("success");
                $(this).addClass(color);
            });

            //循环获取分页的页数
            var pages = 0;
            $.ajax({
                method: "POST",
                url: "getTimeSexCountPages",
                success: function (data) {
                    pages = data;

                    //添加分组组件
                    var page = "<tr><td colspan='6'>";
                    page += "<nav aria-label='Page navigation'>";
                    page += "<ul class='pagination'>";
                    page += "<li>";
                    if (cpage > 1) {
                        page += "<a href='javascript:time_sex_count("+(cpage - 1)+")' aria-label='Previous'>";
                    } else {
                        page += "<a href='javascript:time_sex_count(1)' aria-label='Previous'>"
                    }
                    page += "<span aria-hidden='true'>&laquo;</span>";
                    page += "</a>";
                    page += "</li>";


                    for (var i = 1; i<=pages; i++) {
                        if (cpage == i) {
                            page += "<li class='active'><a href='javascript:time_sex_count("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                        } else {
                            page += "<li><a href='javascript:time_sex_count("+i+")'>"+i+"</a></li>"
                        }
                    }


                    page += "<li>";

                    if (cpage < pages) {
                        page += "<a href='javascript:time_sex_count("+(cpage+1)+")' aria-label='Next'>"
                    } else {
                        page += "<a href='javascript:time_sex_count("+pages+")' aria-label='Next'>"
                    }

                    page += "<span aria-hidden='true'>&raquo;</span>";
                    page += "</a>";
                    page += "</li>";
                    page += "</ul>";
                    page += "</nav>";
                    page += "</td></tr>";
                    $("tbody").append(page);
                    $("tbody tr:last-child td").css("text-align", "center")
                }
            });
        }
    })
}


function time_sex_count_echart() {
    $.ajax({
        method: "POST",
        url: "timeSexCount",
        success: function (data) {
            var jsonArr = JSON.parse(data);
            $("#dataEcharts div:gt(0)").remove();
            $("#dataEcharts").append('<div id="timeSexCount" class="col-sm-6 time_count"></div>');


            var menDatas = [];
            var womenDatas = [];

            $.each(jsonArr, function (index, timeCount) {
                if (timeCount.sex == '男') {
                    menDatas.push(timeCount.count);
                } else {
                    womenDatas.push(timeCount.count);
                }
            });


            var myChart = echarts.init(document.getElementById("timeSexCount"));
            var option = {
                title: {
                    show: true,
                    text: "各时间段不同性别总操作量统计",
                    left: 'center'
                },
                tooltip: {
                    trigger: "axis"
                },
                legend: {
                    data: ['男性', '女性'],
                    left: "left"
                },
                xAxis: {
                    type: 'category',
                    data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', "11",
                        "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: "男性",
                    data: menDatas,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }, {
                    name: "女性",
                    data: womenDatas,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }]
            };

            myChart.setOption(option);
            myChart.resize({
                width: 800,
                height: 600
            })

        }
    });


}